<template>
  <div>
    <div class="top">分享海报(长按保存您的二维码1)</div>
    <div style="text-align: center;font-size: 0.5rem;" v-show="attention">
      <span>请先购买</span>
    </div>
    <div class="inv" v-show="thinvitation">
      <!--<img :src="inviteImg">-->
      <img id="invite">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'FInvitation',
    data() {
      return {
        activityId: '',
        userOpenId: '',
        data: '',
        thinvitation: false,
        attention: false,
        inviteImg:''
      }
    },
    methods: {
      downloadFile(fileName, content){
        var aLink = document.createElement('a');

        var blob = base64Img2Blob(content); //new Blob([content]);


        var evt = document.createEvent("HTMLEvents");

        evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错

        aLink.download = fileName;

        aLink.href = URL.createObjectURL(blob);



        aLink.dispatchEvent(evt);

      },
      base64Img2Blob(code){
        var parts = code.split(';base64,');

        var contentType = parts[0].split(':')[1];

        var raw = window.atob(parts[1]);

        var rawLength = raw.length;



        var uInt8Array = new Uint8Array(rawLength);



        for (var i = 0; i < rawLength; ++i) {

          uInt8Array[i] = raw.charCodeAt(i);

        }

        return new Blob([uInt8Array], {type: contentType});
      }
    },
    mounted() {
      var that = this
      this.activityId = this.$route.params.activityId
      this.userOpenId = this.$route.params.openId
      console.log(this.activityId,this.userOpenId)
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/invite?activityId=' + that.activityId + '&userOpenId=' + that.userOpenId
      }).then(function(res) {
        if(res.status === 200) {
          that.data = res.data
          if(res.data.isPay === 1){
            alert('请先购买才能分享赚钱～')
            that.thinvitation = false;
            that.attention = true;
          }else{
            that.thinvitation = true;
            that.attention = false;

            that.inviteImg = res.data.inviteBannerPic

            document.getElementById("invite").src=that.inviteImg;
          }
          console.log(that.data)
        }
      })

      //请求接口
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/getShareInfo?activityId=' + that.activityId+'&userOpenId='+that.userOpenId
      }).then(function (res) {
        if (res.status === 200) {
          that.shareTitle = res.data.shareTitle
          that.shareContent = res.data.shareContent
          that.sharePic = res.data.sharePic
          console.log('++++++++')
          console.log(res)
          console.log(res.data.shareTitle)
          console.log(res.data.shareContent)
          console.log(that.sharePic)

        } else {
          alert(res.data.errorMessage)
        }
      })


      // 分享接口调用
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/wx/queryWxConfig?activityId=' + that.activityId + '&wxOpenId=' + that.userOpenId + '&inviteUserOpenId=' + that.inviteUserOpenId+'&type=invite'
      }).then(function (res) {
        if (res.status === 200) {
          console.log(res.data.appid)
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appid, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.noncestr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
        } else {
          alert(res.data.errorMessage)
        }
      })


      // 分享好友
      wx.ready(function () {
        wx.onMenuShareAppMessage({
          title: that.shareTitle, // 分享标题
          desc: that.shareContent, // 分享描述
          link: window.location.href,
          imgUrl: that.sharePic, // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
            // alert('click shared');
          },
          success: function (res) {

          },
          cancel: function (res) {
            // alert('shared cancle');
          },
          fail: function (res) {
            // alert(JSON.stringify(res));
          }
        }),
          wx.onMenuShareTimeline({
            title: that.shareTitle, // 分享标题
            link: window.location.href,
            imgUrl: that.sharePic, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }

          })
      })

    }
  }
</script>

<style scoped>
  .inv-con {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    pointer-events:none;
  }

  .invOld img {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 110;
    width: 100vw;
    height:100%;
    user-select: none;
    pointer-events:none;

    position:absolute ;z-index:999; top:0;
  }

  .inv img {
    position: absolute;
    width: 92vw;
    /*-webkit-touch-callout:default;*/
    background: #ececec;
    padding: 4%;
  }

  .code{
    font-size: .3rem;
    /*flex-direction: row;*/
    /*align-items: center;*/
    position: absolute;
    /*margin-top: 63vh;*/
    bottom: 0.1rem;
    z-index: 2;
    width: 100vw;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
  }
  .code img{
    width:2rem;
    height:2rem;
  }
  .code span{
    /*width: 3rem;*/
    /*line-height: .8rem;*/
    color: white;

  }
  .merchantbox {
    /*width: 7.5rem;*/
    /*height: 3.4rem;*/
    /*position: absolute;*/
    /*bottom:2.5rem;*/
    z-index:99;
    text-align: center;
    font-size: 0;
  }
  .merchantbox .marimg {
    width: 0.96rem;
    height: 0.96rem;
    /*display: block;*/
    border-radius: 50%;
  }

  .martxt {
    /*width:1rem;*/
    font-size: 0.22rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    line-height:0.5rem;

  }
  /* btn */

  .footer {
    position: fixed;
    bottom: 0.3rem;
    z-index: 3;
    left: 50%;
    margin-left: -2.815rem;
  }

  .btn {
    width: 5.58rem;
    height: 0.96rem;
    background: linear-gradient(92deg, rgba(252, 105, 80, 1), rgba(252, 134, 94, 1));
    border-radius: 0.48rem;
    font-family: Adobe Heiti Std R;
    font-weight: normal;
    color: rgba(255, 255, 255, 1);
    letter-spacing: .1rem;
    font-size: .36rem;
    text-align: center;
    line-height: 0.96rem;
  }

  .zf {
    font-size: 0.36rem;
    text-align: center;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    line-height: 1rem;
    color: rgba(253, 108, 46, 1);
    text-shadow: 0.02rem 0.03rem 0.08rem rgba(239, 85, 36, 0.84);
  }
  .top {
    background: #fff;
    text-align: center;
    padding: 12px;
    font-size: .3rem;

  }
</style>
